<template>
  <view class="index">
    <!-- 返回 -->
    <view>
      <navTabrBack
        :title="'编辑委托'"
        :navbackStyle="['padding-right: 20rpx;']"
      ></navTabrBack>
    </view>
  </view>
  <!-- 新建委托 -->
  <view style="background-color: #fafafa; padding: 40rpx 0">
    <view class="newTitle">
      标题<view class="entInput"
        ><input
          placeholder="点击输入文本"
          maxlength="20"
          placeholder-class="input-placeholder"
          v-model="dataList.title"
        />（{{ dataList.title?.length }}/20）</view
      >
    </view>
    <view class="newContent">
      <view>需求描述</view>
      <textarea
        class="editContent"
        placeholder="请输入新的委托描述"
        maxlength="200"
        v-model="dataList.content"
      />
      <view class="textareaSum">（{{ dataList.content?.length }}/200）</view>
    </view>
    <!-- picker -->
    <view class="entrustInfo">
      <view>
        <view class="userItem">
          <view class="editTitle">专利类型</view>
          <view class="editData">
            <view class="uni-list-cell-left">
              <picker @change="bindPickerChange1" :value="index" :range="dic">
                <view class="uni-input">{{ dic[index] }}</view>
              </picker></view
            >
            <view class="iconfont icon-icon_arrow_right"></view>
          </view>
        </view>
        <view class="userItem">
          <view class="editTitle">专利状态</view>
          <view class="editData">
            <view class="uni-list-cell-left">
              <picker @change="bindPickerChange" :range="array">
                <view class="uni-input">{{ dataList.baseStatus }}</view>
              </picker>
            </view>
            <view class="iconfont icon-icon_arrow_right"></view>
          </view>
        </view>
        <view class="userItem" style="border: 0">
          <view class="editTitle">截止日期</view>
          <view class="editData">
            <view class="uni-list-cell-left">
              <uni-datetime-picker
                type="datetime"
                @change="pickerClick"
                v-model="endTime"
                return-type="timestamp"
                >{{ formatDate(endTime).split("T")[0] }}</uni-datetime-picker
              >
            </view>
            <view class="uni-list-cell-db">
              <!-- <picker mode="date" :value="date" :start="startDate" :end="endDate" @change="bindDateChange">
						<view class="uni-input">{{date}}</view>
					</picker> -->
            </view>
            <view class="iconfont icon-icon_arrow_right"></view>
          </view>
        </view>
      </view>
    </view>
    <view class="entrustInfo">
      <view class="userItem useIpt">
        <view class="userPhone">手机号码</view>

        <input
          placeholder="点击输入手机号码"
          maxlength="11"
          placeholder-class="input-placeholder"
          v-model="dataList.phone"
          type="number"
        />
      </view>
      <view class="userItem useIpt" style="border: 0">
        <view class="userPhone">QQ号码</view>
        <input
          placeholder="点击输入QQ号码"
          maxlength="20"
          placeholder-class="input-placeholder"
          v-model="dataList.qq"
        />
      </view>
    </view>
    <button class="entrustBtn" @click="submitEntrust">提交编辑</button>
  </view>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="success" type="message">
    <uni-popup-message
      type="success"
      message="委托编辑成功！"
      :duration="1000"
    ></uni-popup-message>
  </uni-popup>
  <!-- 提示信息弹窗 -->
  <uni-popup ref="message" type="message">
    <uni-popup-message
      type="error"
      message="请完整填写信息！"
      :duration="2000"
    ></uni-popup-message>
  </uni-popup>
</template>

<script setup>
import { toRefs, reactive, inject, ref, onMounted } from "vue";
import { onLoad } from "@dcloudio/uni-app";
let $url = inject("$url");
let success = ref();
let message = ref();
let data = reactive({
  endTime: "",
  array: ["已下证", "授权未下证"],
  arr1: [],
  index: 0,
  dic: [],
  userToken: "",
  dataList: {
    qq: "",
    phone: "",
    endTime: "",
    content: "",
    baseType: "",
    baseStatus: "已下证",
    title: "",
    userId: "",
    baseTypeName: "",
    isOk: false,
    ID: "",
    isClosed: 0,
    CreatedAt: ""
  },
  id: "",
});
const { dataList, array, dic, index, endTime } = toRefs(data);
const pickerClick = (time) => {
  console.log(formatDate(time).split("T")[0]);
  // data.endTime = formatDate(time).split("T")[0]
  data.dataList.endTime = formatDate(time);
};
const formatDate = (time) => {
  var date = new Date(time);
  var YY = date.getFullYear() + "-";
  var MM =
    (date.getMonth() + 1 < 10 ? "0" + (date.getMonth() + 1) : date.getMonth() + 1) + "-";
  var DD = date.getDate() < 10 ? "0" + date.getDate() : date.getDate();
  var hh = (date.getHours() < 10 ? "0" + date.getHours() : date.getHours()) + ":";
  var mm = (date.getMinutes() < 10 ? "0" + date.getMinutes() : date.getMinutes()) + ":";
  var ss = date.getSeconds() < 10 ? "0" + date.getSeconds() : date.getSeconds();
  return YY + MM + DD + "T" + hh + mm + ss + "Z";
};
onLoad((res) => {
  data.id = res.id;
  data.dataList.ID = res.id * 1
  uni.getStorage({
    key: "useInfo",
    success: function (res) {
      data.dataList.userId = res.data.ID;
      data.userToken = res.data.token;
      uni.request({
        url: $url + `/zlEntrust/findZlEntrust?ID=${data.id}`,
        method: "GET",
        header: {
          "x-token": res.data.token,
        },
        timeout: 6000,
        fail: (err) => {
          console.log(err, "请求失败！");
        },
        success(res) {
          console.log(res);
          data.dataList.title = res.data.data.rezlEntrust.title;
          data.dataList.content = res.data.data.rezlEntrust.content;
          data.dataList.baseType = res.data.data.rezlEntrust.baseType;
          data.dataList.endTime = res.data.data.rezlEntrust.endTime;
          data.dataList.qq = res.data.data.rezlEntrust.qq;
          data.dataList.phone = res.data.data.rezlEntrust.phone;
          data.dataList.baseStatus = res.data.data.rezlEntrust.baseStatus;
          data.dataList.CreatedAt = res.data.data.rezlEntrust.CreatedAt;
          data.endTime = Date.parse(res.data.data.rezlEntrust.endTime);
          uni.request({
            url: $url + `/zlBaseType/getZlBaseTypeList `,
            method: "GET",
            timeout: 6000,
            fail: (err) => {
              console.log(err, "请求失败！");
            },
            success(res) {
              data.arr1 = res.data.data.list;
              data.dic = res.data.data.list.map((item) => {
                return item.name;
              });
            },
          });
        },
      });
    },
  });
});
const bindPickerChange = (e) => {
  data.dataList.baseStatus = data.array[e.detail.value];
};
const bindPickerChange1 = (e) => {
  data.index = e.detail.value;
  data.arr1.map((item) => {
    if (item.name == data.dic[e.detail.value]) {
      data.dataList.baseTypeName = item.name;
      data.dataList.baseType = item.ID * 1;
    }
  });
};
const submitEntrust = () => {
  if (data.isOk) {
    return;
  }
  if (data.dataList.title?.trim().length == 0) return;
  data.isOk = true;
  data.dataList.baseStatus = data.dataList.baseStatus + "";
  uni.request({
    url: $url + `/zlEntrust/updateZlEntrust`,
    method: "PUT",
    timeout: 6000,
    data: data.dataList,
    header: {
      "x-token": data.userToken,
    },
    fail: (err) => {
      console.log(err, "请求失败！");
    },
    success(res) {
      success.value.open();
      setTimeout(() => {
        uni.navigateBack({
          fail: () => {
            uni.switchTab({
              url: "/pages/index/index",
            });
          },
          success: () => {
            let page = getCurrentPages().pop();
            if (page) {
              page.onLoad(page.options); //执行上个页面的方法
            }
          },
        });
      }, 1000);
    },
  });
};
</script>

<style scoped>
.index {
  background: #fff;
  padding: 0 0 10rpx 28rpx;
}
.newTitle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-left: 27rpx;
  height: 100rpx;
  background: #ffffff;
  font-size: 29rpx;
}
.entInput {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
}
.newTitle input {
  flex: 1;
  margin-left: 40rpx;
  padding-right: 27rpx;
  font-weight: 400;
  color: #999999;
}
.newContent {
  margin-top: 27rpx;
  padding: 27rpx 27rpx 30rpx 27rpx;
  background: #ffffff;
  font-size: 29rpx;
  font-weight: 400;
  color: #999999;
}
.editContent {
  margin-top: 10rpx;
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
  max-height: 450rpx;
  min-height: 150rpx;
}
.entrustInfo {
  margin-top: 30rpx;
  padding: 0 27rpx 10rpx 27rpx;
  background: #ffffff;
}
.textareaSum {
  font-size: 25rpx;
  font-weight: 400;
  color: #999999;
  text-align: right;
}
.userItem {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 25rpx;
  padding: 24rpx 10rpx 24rpx 10rpx;
  border-bottom: 1rpx solid #f7f7f7;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.editTitle {
  flex: none;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.editData .iconfont {
  margin-left: 25rpx;
  font-size: 28rpx;
}
.editData {
  display: flex;
  align-items: center;
}
/* .editData image {
  margin-right: 27rpx;
  width: 72rpx;
  height: 72rpx;
  border-radius: 50%;
} */
.mr {
  margin-right: 27rpx;
  margin-left: 27rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
  overflow: hidden;
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 1;
}
.entrustBtn {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 38rpx 27rpx;
  height: 91rpx;
  background: #1677ff;
  box-shadow: 2rpx 2rpx 9rpx 0rpx #c3c3c5;
  border-radius: 44rpx;
  font-size: 29rpx;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #ffffff;
}
.userPhone {
  width: 150rpx;
  height: 40rpx;
  font-size: 29rpx;
  font-weight: 400;
  color: #333333;
}
.useIpt {
  justify-content: flex-start;
}
</style>
